<template>
  <view>
    <view style="position: fixed;left: 0; right: 0; top: 0;  z-index: 9999;">
      <me-tabs v-model="tabIndex" :tabs="list"  :fixed="true" color="#73B683" />
      <view class="select-box" >
        <view class="select-item" @click="show1 = true ">
          <view style="margin-right: 6rpx;">全部套餐</view><u-icon name="arrow-down-fill" size="12" ></u-icon>
        </view>
        <view class="select-item" @click="show2 = true ">
          <view style="margin-right: 6rpx;">{{typeText[tabIndex]}}</view><u-icon name="arrow-down-fill" size="12"></u-icon>
        </view>
      </view>
      <view class="zhuyi" >
        不可同时享受商家其他优惠，具体以商家信息为准！
      </view>
    </view>

    <!--  这里先用静态的  -->
    <view class="shop-list">
      <view class="shop-item" v-for="item in 4" >
        <base-image height="140rpx" width="140rpx" radius="10rpx" :list="item.img_url"></base-image>
        <view class="shop-text-box">
          <view class="text-header once">{{item.name}}</view>
          <view class="once">{{item.admin_mobile}}</view>
          <view class="second">{{item.notice?item.notice:''}}{{item.address}}</view>
        </view>
      </view>
    </view>

<!--  动态列表  -->
<!--    <view style="position: absolute; width: 100vw; top: 0;" >-->
<!--      <mescroll-item ref="mescrollItem0" :i="0" :index="tabIndex" :tabs="list" :type="type[0]" @react="react" ></mescroll-item>-->
<!--      <mescroll-item ref="mescrollItem1" :i="1" :index="tabIndex" :tabs="list" :type="type[1]" @react="react" ></mescroll-item>-->
<!--    </view>-->

    <u-action-sheet :actions="list1" :show="show1" @close="show1 = false" @select="selectClick1"></u-action-sheet>
    <u-action-sheet :actions="list2" :show="show2" @close="show2 = false" @select="selectClick2"></u-action-sheet>

  </view>
</template>

<script>
	export default {
	data() {
		return {
			navBarHeight:(getApp().globalData.statusBarHeight + 44 ) * 2,// rpx

			list:  [{name:'自由行',type:'0'}, {name:'线路',type:'1'}],
			// 或者如下，也可以配置keyName参数修改对象键名
			// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],

			tabIndex: 0, // tab下标

			list1: [
        {
          name:'全部套餐',
          id:1,
          // fontSize:'20'
        },
			],
			show1: false,

			list2: [
				{
					name:'选项一',
          code:'1',
					// fontSize:'20'
				},
				{
					name: '选项二',
          code:'2',
					// fontSize:'20'
				},
				{
					name: '选项三',
          code:'3',
					// fontSize:'20'
				}
			],
			show2: false,

      type:['',''],
      typeText:['商家类型','商家类型'],

		};
	},
	methods: {
    selectClick1(e){
      console.log(e)
    },
    selectClick2(e){
      this.type[this.tabIndex] = e.code
      this.typeText[this.tabIndex] = e.name
      console.log(e)
    },
    react(){
      this.type[this.tabIndex] = ''
      this.typeText[this.tabIndex] = '商家类型'
    }
	},

	}
</script>

<style lang="less">
.select-box{
	display: flex;
	box-shadow:0px 4px 10px rgba(0, 0, 0, 0.10);
	background-color: #fff;
	.select-item{
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;

	}
}
.zhuyi{
	padding: 10rpx 20rpx;
	font-size: 26rpx;
	color: #999;
}
page{
	background-color: #F8F8F8;
}
.shop-list{
	padding-left: 20rpx;
	padding-right: 20rpx;
	.shop-item{
		display: flex;
		padding: 20rpx;
		margin-bottom: 24rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.shop-text-box{
			margin-left: 12rpx;
			font-size: 26rpx;
			color: #999;
			.text-header{
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
			}
			.once{
				/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
				display: -webkit-box;
				/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
				-webkit-box-orient:vertical;
				/*要显示的行数*/
				-webkit-line-clamp:1;
				/* 溢出部分隐藏 */
				overflow:hidden;
			}
			.second{
				/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
				display: -webkit-box;
				/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
				-webkit-box-orient:vertical;
				/*要显示的行数*/
				-webkit-line-clamp:2;
				/* 溢出部分隐藏 */
				overflow:hidden;
			}

		}
	}

}
</style>
